<template>
  <div>
    <y-header></y-header>
    <div class="person_body clearfix">
      <y-side :type="'bzzyn'"></y-side>
      <div class="person_content">
        <ul class="person_title clearfix">
          <li>布置作业</li>
        </ul>
        <div class="person_info ">
           <div style="float: left;">
              <select v-model="obj.courseId" @change="getCourseOtherFileList" style="height: 34px;">
                    <option value="">--全部--</option>
                    <option v-for="course in courseList" :checked="obj.courseId == course.id" :key="course.id" :value="course.id" v-html="course.courseName"></option>
            </select>
           </div>
           <div style="float: right;">
              <router-link tag="a" target="_blank" :to="'/view/commitTask?courseId=' + obj.courseId + '&userType=1'" class="text_link">
                <button class="solid_btn b_red" >查看学生作业</button>
              </router-link>
            </div>
          <table class="table ">
            <thead>
              <tr>
                <th style="width: 100px;">序号</th>
                <th>所属课程名称</th>
                <th>作业文件</th>
                <th style="width: 140px;">操作</th>
              </tr>
            </thead>
            <tbody>
             <tr>  
                <td>自动</td>                   
                <td class="name"><input type="text" v-model="obj.fileName" class="form_input" placeholder="文件名称"></td>
                <td><y-upload :upOk="isUp" @rtnUrl="getUrl" :isresource="true" /></td>
                <td class="operate">
                  <button class="solid_btn b_red" @click="addPraxis" :disabled="solidBtn">保存</button>
                </td>
              </tr> 
              <tr v-for="(item, index) in list" :key="item.id"   v-dragging="{ item: item, list: list, group: 'color' }">
                <td>{{index + 1}}</td>
                <td class="name">{{item.courseName}}</td>
                <td class="c_green">
                  <a :href="item.fileUrl">{{item.fileName}}</a>            
                 
                </td>            
                <td class="operate">
                  <a href="javascript:void(0)" @click="del(item.id)" class="text_link">删除</a>
                </td>
              </tr>         
             
            </tbody>
          </table>
          <a href="javascript:" @click="$router.back(-1)" class="cont_btn solid_btn b_red">完成返回</a>
        </div>
      </div>
    </div>
    <y-footer></y-footer>
  </div>
</template>
<script>
import YHeader from '~/components/common/Header'
import YFooter from '~/components/common/Footer'
import YSide from '~/components/account/Side'
import YUpload from '~/components/account/Upload'
import {courseOtherFileList,saveCourseOtherFile,courseListByUserNo,delCourseOtherFileList} from '../../../api/account/courseOtherFile'
export default {
  data () {
    return {
      load: false,
      tab: 1,
      num: 1,
      list: [],
      solidBtn: false,
      courseList: [],
      obj: {
        courseId: '',
        courseName: [],
        type: 2,
        fileName: ''
      },
      fileUrl: ''
    }
  },
  computed: {
    isUp () {
      if (this.fileUrl) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 获取上传附件
    getUrl (file) {
      console.log(file)
      console.log('file======')
      this.fileUrl = file.url || ''
      this.obj.fileName = file.name || ''
      this.obj.fileUrl = file.url || ''
    },
  
  
   
    // 删除
    del (no) {
      let that = this;
      this.$msgBox({
        content: '你确定要删除该文件吗?'
      }).then(async (val) => {
        delCourseOtherFileList({id: no}).then(res => {
          res = res.data
          console.log(res)
          if (res.code === 200) {
            this.$msgBox({
              content: '删除成功',
              isShowCancelBtn: false
            })
            this.getCourseOtherFileList();
          } else {
            if (res.code >= 300 && res.code < 400) {
              this.$msgBox({
                content: res.msg,
                isShowCancelBtn: false
              }).then(() => {
                this.$store.dispatch('REDIRECT_LOGIN', result.code)
              }).catch(() => {
                this.$store.dispatch('REDIRECT_LOGIN', result.code)
              })
            } else {
              this.$msgBox({
                content: res.msg,
                isShowCancelBtn: false
              }).catch(() => {})
            }
          }
          // console.log(res)
        })
      }).catch(() => {
      })
    },
  
  
    addPraxis () {
      if (!this.obj.courseId) {
        this.$msgBox({
          content: '请选择所属课程',
          isShowCancelBtn: false
        })
        return
      }
      if (!this.fileUrl) {
        this.$msgBox({
          content: '请上传文件',
          isShowCancelBtn: false
        })
        return
      }
     
      this.solidBtn = true;
      this.obj.type = 2;
     
      saveCourseOtherFile(this.obj).then(res => {
        res = res.data;
        this.solidBtn = false;
        if (res.code === 200) {
          this.list.push(res.data);
          this.num = this.list.length + 1;
          this.fileUrl = '';
          this.obj.fileName ='';
        } else {
          if (res.code >= 300 && res.code < 400) {
            this.$msgBox({
              content: res.msg,
              isShowCancelBtn: false
            }).then(() => {
              this.$store.dispatch('REDIRECT_LOGIN', result.code)
            }).catch(() => {
              this.$store.dispatch('REDIRECT_LOGIN', result.code)
            })
          } else {
            this.$msgBox({
              content: res.msg,
              isShowCancelBtn: false
            }).catch(() => {})
          }
        }
        // console.log(res)
      }).catch(() => {
        this.solidBtn = false;
        this.$msgBox({
          content: '',
          isShowCancelBtn: false
        })
      })
    },

 
    getCourseOtherFileList () {
      this.list = [];
      courseOtherFileList({
           courseId: this.obj.courseId,
           type:2,      
      }).then(res => {
        let result = res.data
    
        if (result.code === 200 && result.data.list.length > 0) {
          this.list = result.data.list;
         
        } else if (result.code > 300 && result.code <400) {
          this.$msgBox({
            content: '登录超时，请重新登录',
            isShowCancelBtn: false
          }).then(() => {
            this.$store.dispatch('REDIRECT_LOGIN', result.code)
          }).catch(() => {
            this.$store.dispatch('REDIRECT_LOGIN', result.code)
          })
        } else {
          this.notdata = true;
          this.pageObj.totalPage = 0;
        }     
      }).catch(msg => {
        // this.$msgBox({
        //   content: '加载数据失败，请稍后刷新再试！！',
        //   isShowCancelBtn: false
        // })
      })
    },

    getCourseList () {
      
      courseListByUserNo({
           userNo: JSON.parse(localStorage.getItem('OcUserInfo')).userNo
      }).then(res => {
        let result = res.data
        console.log("result------")
        console.log(result)
        if (result.code === 200 && result.data.list.length > 0) {
          this.courseList = result.data.list;
          console.log("list------")
          console.log(this.list)
          this.notdata = false;
          this.pageObj = result.data;
        } else if (result.code > 300 && result.code <400) {
          this.$msgBox({
            content: '登录超时，请重新登录',
            isShowCancelBtn: false
          }).then(() => {
            this.$store.dispatch('REDIRECT_LOGIN', result.code)
          }).catch(() => {
            this.$store.dispatch('REDIRECT_LOGIN', result.code)
          })
        } else {
          this.notdata = true;
          this.pageObj.totalPage = 0;
        }
        cons
      }).catch(msg => {
        // this.$msgBox({
        //   content: '加载数据失败，请稍后刷新再试！！',
        //   isShowCancelBtn: false
        // })
      })
    }
  },
  
  mounted() {
    this.getCourseList();
    this.getCourseOtherFileList();
  },
  components: {
    YHeader,
    YFooter,
    YUpload,
    YSide
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import '~/assets/css/account.scss';
  .person_body {
    width: 1200px;
    margin: 30px auto 0;
    min-height: 1000px;
    .upload_com {
      .solid_btn {
        display: inline-block;
        height: 25px;
        line-height: 22px;
        background: #fff;
        border-color: #ddd;
        color: #999;
        outline: none;
        &:hover {
          color: #D51423;
          border-color: #D51423;
        }
      }
    }
  }
  .person_content {
    width: 1012px;
    float: right;
    background: #fff;
    border-radius: 6px;
  }
  .person_title {
    border-bottom: 1px solid rgb(242, 242, 242);
    li {
      color: #D51423;
      float: left;
      line-height: 60px;
      padding: 0 30px;
      border-bottom: 2px solid #D51423;
      font-size: 14px;
    }
  }
  .person_info {
    padding-bottom: 40px;
  }
  .name{
    .form_input{
      margin: 10px 0;
      height: 34px;
      border: 1px solid #e7e7e7;
      width: 278px;
      text-indent: 1em;
    }
  }
  .cont_btn {
    width: 280px;
    display: block;
    margin:20px auto 0;
  }
  .table td.name {
    text-align: center;
  }
  .table th {
    line-height: 36px;
    color: #333;
    background-color: #ffffff;
}
</style>
